<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>发货明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/wangeditor.css">
    <link rel="stylesheet" href="../../../style/index.css">
    <style>
        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
        }

        .custom-tree-node .config {
            padding: 10px 0 10px 8px;
        }

        .el-tree-node__content {
            padding: 10px 0 10px;
        }

        .el-dialog__header {
            padding: 15px 15px 10px;
        }

        .el-dialog__body {
            padding: 15px;
        }

        .el-dialog__footer {
            padding: 5px 15px 10px;
        }

        .cont-scroll-wrap {
            border: 1px solid #EBEEF5;
            flex: auto;
            height: 0;
            overflow-y: auto;
        }

        .el-descriptions-item__label {
            width: 100px;
        }

        .el-input.is-disabled .el-input__inner {
            color: #000;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <el-form :inline="true" :form="form">
            <el-form-item>
                <el-input v-model.trim="form.Sales_Order_SerialNumber" clearable placeholder="订单编号/订单明细编号" />
            </el-form-item>
            <el-form-item>
                <el-select v-model.trim="form.Supplier_SerialNumber" clearable style="width: 100%;"
                    placeholder="请选择供应商">
                    <el-option v-for="item in Supplier" :key="item.Supplier_SerialNumber" :label="item.Supplier_Name"
                        :value="item.Supplier_SerialNumber"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-date-picker prefix-icon="el-icon-date" v-model="form.Sales_Date" clearable type="datetimerange"
                    value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSerach">查询</el-button>
            </el-form-item>
            <el-form-item>
                <yl-button type="success" :data="ExportData" :loading="loading" @click="Export(form)">发货信息导出</yl-button>
            </el-form-item>
            <el-form-item>
                <el-dropdown trigger="click" @command="downloadTemplate">
                    <el-button type="primary">
                        下载导入模板<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="logistics">货物流信息模板</el-dropdown-item>
                        <el-dropdown-item command="logisticsData">物流公司数据信息</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-form-item>
            <el-form-item>
                <el-dropdown trigger="click" @command="importTemplate">
                    <el-button type="danger">
                        批量导入<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="logistics">导入发货物流信息模板</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="dialogVisible2 = true">字段设置</el-button>
            </el-form-item>
        </el-form>
        <el-table v-if="table" :data="tableData" stripe border height="calc(100vh - 140px)" style="width: 100%">
            <el-table-column v-if="Show.index" align="center" type="index" fixed="left" label="序号" width="50"></el-table-column>
            <el-table-column v-if="Show.config" align="center" width="100" fixed="left" label="操作">
                <template v-slot="{row}">
                    <el-dropdown @command="handleLogistics($event,row)" placement="bottom">
                        <el-button type="success" size="small">
                            更多<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="Logistics">物流详情</el-dropdown-item>
                            <el-dropdown-item command="Detail">订单详情</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
            <el-table-column v-if="Show.Sales_Order_Detail_SerialNumber" align="center" prop="Sales_Order_Detail_SerialNumber" width="300" show-overflow-tooltip label="订单明细编号"></el-table-column>
            <el-table-column v-if="Show.Sales_Order_SerialNumber" align="center" prop="Sales_Order_SerialNumber" width="300" show-overflow-tooltip label="订单编号"></el-table-column>
            <el-table-column v-if="Show.Supplier_Article_SerialNumber" align="center" prop="Supplier_Article_SerialNumber" width="200" show-overflow-tooltip label="供应商品编号"></el-table-column>
            <el-table-column v-if="Show.Supplier_Name" align="center" prop="Supplier_Name" width="150" show-overflow-tooltip label="供应商"></el-table-column>
            <el-table-column v-if="Show.Article_Name" align="center" prop="Article_Name" width="120" show-overflow-tooltip  label="商品名称"></el-table-column>
            <el-table-column v-if="Show.Specifications_Name" align="center" prop="Specifications_Name" width="120" show-overflow-tooltip  label="规格名称"></el-table-column>
            <el-table-column v-if="Show.Activity_Name" align="center" prop="Activity_Name" width="120" show-overflow-tooltip  label="所属活动">
                <template v-slot="{row}">
                    {{row.Activity_Name?row.Activity_Name:'暂无所属活动'}}
                </template>
            </el-table-column>
            <el-table-column v-if="Show.Member_Name" align="center" prop="Member_Name" width="120" show-overflow-tooltip  label="下单人"></el-table-column>
            <el-table-column v-if="Show.Sales_Contacts" align="center" prop="Sales_Contacts" width="120" show-overflow-tooltip  label="收货人"></el-table-column>
            <el-table-column v-if="Show.Sales_Address" align="center" prop="Sales_Address" width="300" show-overflow-tooltip  label="收货地址"></el-table-column>
            <el-table-column v-if="Show.Quantity" align="center" prop="Quantity" width="100" label="下单数量"></el-table-column>
            <el-table-column v-if="Show.Sales_Unit_Price" align="center" prop="Sales_Unit_Price" width="100" show-overflow-tooltip  label="销售单价"></el-table-column>
            <el-table-column v-if="Show.Sales_Amount" align="center" prop="Sales_Amount" width="100" show-overflow-tooltip  label="销售总价"></el-table-column>
            <el-table-column v-if="Show.Reality_Amount" align="center" prop="Reality_Amount" width="100" show-overflow-tooltip  label="实收金额"></el-table-column>
            <el-table-column v-if="Show.Sales_Point" align="center" prop="Sales_Point" width="100" show-overflow-tooltip  label="积分消费"></el-table-column>
            <el-table-column v-if="Show.Purchase_Unit_Price" align="center" prop="Purchase_Unit_Price" width="100" label="采购单价">
                <template v-slot="{row}">
                    <span :style="{color:row.Purchase_Unit_Price?'':'#F56C6C'}">{{row.Purchase_Unit_Price?row.Purchase_Unit_Price:'暂无采购价格'}}</span>
                </template>
            </el-table-column>
            <el-table-column v-if="Show.Purchase_Amount" align="center" prop="Purchase_Amount" width="100" label="采购总价">
                <template v-slot="{row}">
                    <span :style="{color:row.Purchase_Unit_Price?'':'#F56C6C'}">{{row.Purchase_Unit_Price?accMul(row.Purchase_Unit_Price,row.Quantity):'暂无采购价格'}}</span>
                </template>
            </el-table-column>
            <el-table-column v-if="Show.Sales_Date" align="center" prop="Sales_Date" width="180" label="下单时间"></el-table-column>
            <el-table-column v-if="Show.Collection_Date" align="center" prop="Collection_Date" width="180" label="收款时间">
                <template v-slot="{row}">
                    <span>{{getYMDHMSDate(row.Collection_Date)}}</span>
                </template>
            </el-table-column>
            <el-table-column v-if="Show.Delivery_Quantity" align="center" prop="Delivery_Quantity" width="100"  label="已发货数量">
                <template v-slot="{row}">
                    <span>{{row.Delivery_Quantity}}</span>
                </template>
            </el-table-column>
            <el-table-column v-if="Show.UNDelivery_Quantity" align="center" prop="UNDelivery_Quantity" width="100"  label="未发货数量">
                <template v-slot="{row}">
                    <span :style="{color:Color(row)}">{{ parseInt(row.Quantity) - parseInt(row.Delivery_Quantity)}}</span>
                </template>
            </el-table-column>
            <el-table-column v-if="Show.Logistics_Name" align="center" prop="Logistics_Name" width="120" show-overflow-tooltip label="物流公司">
                <template v-slot="{row}">
                    {{ row.Logistics_Name ? row.Logistics_Name : '暂无物流公司'}}
                </template>
            </el-table-column>
            <el-table-column v-if="Show.Logistics_Number" align="center" prop="Logistics_Number" width="170" show-overflow-tooltip label="物流单号">
                <template v-slot="{row}">
                    {{ row.Logistics_Number ? row.Logistics_Number : '暂无物流单号'}}
                </template>
            </el-table-column>
            <el-table-column v-if="Show.Row_Status" align="center" prop="Row_Status" fixed="right" label="发货状态">
                <template v-slot="{row}">
                    <el-tag :type="Type(row)[1]">{{Type(row)[0]}}</el-tag>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="margin-top: 5px;" background @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="form.page" :page-sizes="[20, 30, 50]"
            :page-size="form.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        <show-logistics :visible.sync="dialogVisible" :data="Sales_Order" @success="getList(form)"></show-logistics>
        <show-detail :visible.sync="dialogVisible1" :data="Sales_Order1"></show-detail>
        <field-config v-model="field" :visible.sync="dialogVisible2" @success="getField('deliver_order',(fields)=>{ table = false; field = fields })"></field-config>
    </div>
    <script type="text/javascript" src="../../../utils/wangeditor.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.min.js"></script>
    <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
    <script type="text/javascript" src="../../../utils/vue.min.js"></script>
    <script type="text/javascript" src="../../../utils/vuex.min.js"></script>
    <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
    <script type="text/javascript" src="../../../component/component.js"></script>
    <script type="text/javascript" src="../../../utils/FileSaver.min.js"></script>
    <script type="text/javascript" src="../../../utils/FileSaver.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../../utils/xlsx.core.min.js"></script>
    <script type="text/javascript" src="../../../config/config.js"></script>
    <script type="text/javascript" src="../../../utils/compressor.js"></script>
    <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
    <script type="text/javascript" src="../../../utils/utils.js"></script>
    <script type="text/javascript" src="../index.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
</body>

</html>